@use '../core' as *;

:global(#docs-nav-collapser) {
    $top-bar-height: 58px;

    --right-margin: #{$spacing-size-16};

    font-size: var(--text-fs-base);
    width: 100%;

    &[aria-hidden='true'] {
        border-bottom-color: transparent;
    }

    @media screen and (min-width: $breakpoint-docs-nav-medium) {
        flex-shrink: 0;
        width: var(--layout-width-3-12);
        height: auto !important; // !important required to override <Collapsible> component styling
        border-bottom: none;
        overflow: visible !important; // !important required to override <Collapsible> component styling

        > div {
            display: block !important; // !important required to override <Collapsible> component styling
        }

        @supports (position: sticky) {
            position: sticky;
            top: $top-bar-height;
            height: calc(
                100vh - #{$top-bar-height}
            ) !important; // !important required to override <Collapsible> component styling
        }
    }

    @media screen and (min-width: $breakpoint-docs-nav-large) {
        width: calc(var(--layout-width-3-12) - var(--right-margin));
    }
}

// ag-grid.com menu style overrides
:global(#docs-nav-collapser) {
    ul.menuInner {
        padding-bottom: 0;
        margin-bottom: 0;
    }

    li:first-child button:not([class^='ag-']) {
        margin-top: 0;
    }
}

.menu {
    padding-top: $spacing-size-10;
    padding-bottom: $spacing-size-24;

    h5 {
        text-transform: uppercase;
        margin-bottom: $spacing-size-2;
    }

    // Override menuGroup styles
    .seriesTypesNav > li {
        margin-bottom: 0 !important;

        // Remove left line and adjust spacing
        a {
            margin-left: $spacing-size-1;
            padding-left: $spacing-size-1;
            border-left: none;
        }
    }

    .seriesTypesNav .enterpriseIcon svg {
        transform: translate(-0.05em, 0.275em);
    }
}

.enterpriseIcon {
    --icon-size: 1.15em;
    --color-icon: var(--color-enterprise-icon);

    position: relative;
    margin-left: 4px;
    color: transparent;

    svg {
        position: absolute;
        left: 0;
        transform: translate(-0.05em, 0.075em);
    }
}

button .menuIcon {
    --icon-size: 1.75em;

    bottom: 0.15em;
    margin-right: $spacing-size-1;
    opacity: 0.6666;
    transition:
        fill $transition-default-timing,
        opacity $transition-default-timing;
}

.activeMenuItem .menuIcon {
    fill: var(--active-color) !important;
}

a :global(.icon).menuIcon {
    --icon-size: 1.75em;

    fill: var(--color-fg-secondary);
    margin-bottom: $spacing-size-1;
    margin-right: $spacing-size-1;
    opacity: 0.75;
    transition:
        fill $transition-default-timing,
        opacity $transition-default-timing;

    #{$selector-darkmode} & {
        fill: var(--color-fg-secondary);
    }
}

.whatsNewLink a {
    display: block;
    position: relative;
    width: fit-content;
    margin-bottom: $spacing-size-4;
    padding: 2px 10px;
    text-decoration: none;
    font-size: var(--text-fs-sm);
    color: var(--color-logo-orange);
    border-radius: 24px;
    border: 1px solid var(--color-logo-orange);
    transition:
        background-color $transition-default-timing,
        color $transition-default-timing;
    -webkit-font-smoothing: auto;

    &:hover,
    &:focus {
        background-color: color-mix(in srgb, var(--color-logo-orange) 5%, var(--color-bg-primary));
    }

    #{$selector-darkmode} & {
        &:hover,
        &:focus {
            background-color: color-mix(in srgb, var(--color-logo-orange) 10%, var(--color-bg-primary));
        }
    }
}
